<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="head-container">
          <el-input
            v-model="deviceSearchParams.devName"
            placeholder="请输入设备名称"
            clearable
            size="mini"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
            @change="deviceSearch"
          />
        </div>
        <div class="head-container">
          <el-radio-group
            v-model="queryData.deviceNum"
            ref="deviceRadioRef"
            @change="getList"
          >
            <el-radio
              v-for="item in deviceOptions"
              :key="item.num"
              :label="item.num"
              size="large"
            >{{ item.devName }}
            </el-radio>
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row
          :gutter="15"
          class="mb8"
        >
          <el-col :span="1.5">
            <el-button
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handelAdd"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              plain
              icon="el-icon-edit"
              :disabled="single"
              size="mini"
              @click="handelEdit"
            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              plain
              icon="el-icon-delete"
              :disabled="multiple"
              size="mini"
              @click="handelDel"
            >删除
            </el-button>
          </el-col>
          <el-form
            :model="queryData"
            ref="queryDataRef"
            :inline="true"
            class="el-form-search"
          >
            <!--通道名称-->
            <el-form-item
              label="名称"
              prop="channelName"
              class="el-form-search-item"
            >
              <el-input
                clearable
                placeholder="通道名称"
                v-model.trim="queryData.channelName"
              ></el-input>
            </el-form-item>
            <!--所属设备-->
            <!-- <el-form-item
              label="设备"
              prop="deviceNum"
              class="el-form-search-item"
            >
              <el-select
                clearable
                filterable
                placeholder="请选择设备"
                v-model="queryData.deviceNum"
              >
                <el-option
                  v-for="item in deviceOptions"
                  :key="item.num"
                  :value="item.num"
                  :label="item.devName"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <!--并网点-->
            <el-form-item
              label="并网点"
              prop="deviceNum"
              class="el-form-search-item"
            >
              <el-select
                clearable
                filterable
                placeholder="请选择并网点"
                v-model="formData.connectionPointNum"
                class="from-select"
              >
                <el-option
                  v-for="item in connectionPointOptions"
                  :key="item.num"
                  :value="item.num"
                  :label="item.connectionPointName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-form-search-item">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="querySearch"
              >搜索
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-refresh"
                @click="resetSearch"
              >重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>

        <!-- 表格列表 -->
        <el-table
          :data="channelList"
          :height="tableHeight"
          v-loading="loading"
          border
          stripe
          @selection-change="handelSelectionChange"
          highlight-current-row
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            label="#"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="channelName"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="设备"
            prop="device.devName"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="并网点"
            prop="connectionPoint.connectionPointName"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="额定电压"
            prop="ratedVoltage"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="电压等级"
            prop="voltageLevel"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="接线方式"
            prop="wiringMeth"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="电压变比"
            prop="voltageRatio"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="电流变比"
            prop="currentRatio"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="对应电压"
            prop="matchVoltage"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="接入方式"
            prop="accessMode"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="基准短路容量"
            prop="baseShortCirCap"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="最小短路容量"
            prop="minShortCirCap"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="用电协议容量"
            prop="eServAgCap"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="用电设备容量"
            prop="dEquipCap"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="用电上限阈值"
            prop="voltageUpperLimit"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="用电下限阈值"
            prop="voltageLowerLimit"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="电压中断阈值"
            prop="voltageLnterThr"
            width="100"
            align="center"
          ></el-table-column>

          <el-table-column
            label="操作"
            width="120"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                @click="handelEdit(scope.row)"
              >修改
              </el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="handelDel(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 修改新增对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-dialogDrag
      width="800px"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="100px"
        @submit.prevent
      >
        <!-- 第一行 -->
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item
              label="名称"
              prop="channelName"
            >
              <el-input
                clearable
                placeholder="输入通道名称"
                v-model.trim="formData.channelName"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="设备"
              prop="deviceNum"
            >
              <el-select
                clearable
                filterable
                placeholder="请选择设备"
                v-model="formData.deviceNum"
                class="from-select"
              >
                <el-option
                  v-for="item in deviceOptions"
                  :key="item.num"
                  :value="item.num"
                  :label="item.devName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="并网点"
              prop="connectionPointNum"
            >
              <el-select
                clearable
                filterable
                placeholder="请选择并网点"
                v-model="formData.connectionPointNum"
                class="from-select"
              >
                <el-option
                  v-for="item in connectionPointOptions"
                  :key="item.num"
                  :value="item.num"
                  :label="item.connectionPointName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="接线方式"
              prop="wiringMeth"
            >
              <el-select
                v-model="formData.wiringMeth"
                placeholder="选择接线方式"
                class="from-select"
              >
                <el-option
                  v-for="dict in wiringMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="接入方式"
              prop="accessMode"
            >
              <el-select
                v-model="formData.accessMode"
                placeholder="接入方式"
                class="from-select"
              >
                <el-option
                  v-for="dict in accessMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="额定电压"
              prop="ratedVoltage"
            >
              <el-select
                v-model="formData.ratedVoltage"
                placeholder="额定电压"
                class="from-select"
              >
                <el-option
                  v-for="dict in ratedVoltageOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="电压等级"
              prop="voltageLevel"
            >
              <el-select
                v-model="formData.voltageLevel"
                placeholder="电压等级"
                class="from-select"
              >
                <el-option
                  v-for="dict in voltageLevelOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="电压变比"
              prop="voltageRatio"
            >
              <el-input
                clearable
                placeholder="输入电压变比"
                v-model.trim="formData.voltageRatio"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="电流变比"
              prop="currentRatio"
            >
              <el-input
                clearable
                placeholder="输入电流变比"
                v-model.trim="formData.currentRatio"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="对应电压"
              prop="matchVoltage"
            >
              <el-select
                clearable
                placeholder="对应电压"
                v-model="formData.matchVoltage"
                class="from-select"
              >
                <el-option
                  v-for="item in matchVoltageOptions"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  :label="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="基准短路容量"
              prop="baseShortCirCap"
            >
              <el-input
                clearable
                placeholder="输入基准短路容量"
                v-model.trim="formData.baseShortCirCap"
              >
                <template slot="append">KW</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第六行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="最小短路容量"
              prop="minShortCirCap"
            >
              <el-input
                clearable
                placeholder="输入最小短路容量"
                v-model.trim="formData.minShortCirCap"
              >
                <template slot="append">KW</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="用电协议容量"
              prop="eServAgCap"
            >
              <el-input
                clearable
                placeholder="输入用电协议容量"
                v-model.trim="formData.eServAgCap"
              >
                <template slot="append">KW</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第七行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="用电设备容量"
              prop="dEquipCap"
            >
              <el-input
                clearable
                placeholder="输入用电设备容量"
                v-model.trim="formData.dEquipCap"
              >
                <template slot="append">KW</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="电压上限阈值"
              prop="voltageUpperLimit"
            >
              <el-input
                clearable
                placeholder="输入电压上限阈值"
                v-model.trim="formData.voltageUpperLimit"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第八行 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item
              label="电压下限阈值"
              prop="voltageLowerLimit"
            >
              <el-input
                clearable
                placeholder="输入电压下限阈值"
                v-model.trim="formData.voltageLowerLimit"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="电压中断阈值"
              prop="voltageLnterThr"
            >
              <el-input
                clearable
                placeholder="输入电压中断阈值"
                v-model.trim="formData.voltageLnterThr"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          size="mini"
          @click="submitFormData"
        >提交
        </el-button>
        <el-button
          size="mini"
          @click="close"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listChannel,
  addChannel,
  getByNum,
  editChannel,
  delChannel,
} from "@/api/maintenance/channel";
import { listConnectionPoint } from "@/api/maintenance/connectionPoint";
import { getDeviceList } from "@/api/device/device";

export default {
  data() {
    return {
      loading: true,

      /**变电站搜索 */
      deviceSearchParams: {},

      /**搜索栏 */
      queryData: {
        pageNum: 1,
        pageSize: 30,
        channelName: undefined,
        connectionPointNum: undefined,
        deviceNum: undefined,
        orderBy: "update_time",
        isAsc: "asc",
      },
      // 并网点下拉框数据
      connectionPointOptions: [],
      // 设备下拉框数据
      deviceOptions: [],
      // 电压等级下拉框数据
      voltageLevelOptions: [],
      // 接线方式下拉框数据
      wiringMethodOptions: [],
      // 接入方式下拉框数据
      accessMethodOptions: [],
      // 额定电压下拉框数据
      ratedVoltageOptions: [],
      // 对应电压下拉框数据
      matchVoltageOptions: [],

      /**表格数据 */
      tableHeight: "calc(100vh - 200px)",
      channelList: [],
      single: true,
      multiple: true,
      total: 0,
      ids: [],

      /**对话框数据 */
      title: "",
      open: false,
      formData: {},
      rules: {
        channelName: [
          { required: true, message: "通道不能为空", trigger: "blur" },
        ],
        connectionPointNum: [
          { required: true, message: "并网点不能为空", trigger: "blur" },
        ],
        deviceNum: [
          { required: true, message: "设备不能为空", trigger: "blur" },
        ],
        // 电压变比
        voltageRatio: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        // 电流变比
        currentRatio: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        // 基准短路容量
        baseShortCirCap: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        // 最小短路容量
        minShortCirCap: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        // 用电协议容量
        eServAgCap: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        // 用电设备容量
        dEquipCap: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        voltageUpperLimit: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        voltageLowerLimit: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
        voltageLnterThr: [
          {
            validator: this.formValidation.validateNumber,
            message: "只能输入数字和小数",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    // 并网点数据
    listConnectionPoint().then((response) => {
      this.connectionPointOptions = response.rows;
    });
    // 电压等级
    this.getDicts("zk_voltage_level").then((response) => {
      this.voltageLevelOptions = response.data;
    });
    // 接线方式
    this.getDicts("zk_wiring_method").then((response) => {
      this.wiringMethodOptions = response.data;
    });
    // 接入方式
    this.getDicts("zk_access_method").then((response) => {
      this.accessMethodOptions = response.data;
    });
    // 额定电压
    this.getDicts("zk_rated_voltage").then((response) => {
      this.ratedVoltageOptions = response.data;
    });
    // 设备数据
    getDeviceList().then((response) => {
      this.deviceOptions = response.rows;
      // 判断设备的数量，如果为零就设置过滤的设备ID为一个不可能的值；
      this.queryData.deviceNum =
        this.deviceOptions.length > 0 ? this.deviceOptions[0].num : -1;

      // 设置queryData，如果把this.getList();放入到方法外边，设置的参数不生效

      this.getList();
    });
    this.getDicts("match_voltage").then((response) => {
      this.matchVoltageOptions = response.data;
    });
  },
  methods: {
    /**获取通道列表 */
    getList() {
      this.loading = true;
      listChannel(this.queryData).then((response) => {
        console.info(response.rows);
        this.channelList = response.rows;

        this.total = response.total;
        this.loading = false;
      });
    },
    reset() {
      this.resetForm("formDataRef");
      this.formData = {
        deviceNum: this.queryData.deviceNum,
        wiringMeth: "3P4W3I",
        accessMode: "公共连接点",
        ratedVoltage: "57.7V",
        voltageLevel: "220V",

        voltageRatio: 1,
        currentRatio: 1,
        baseShortCirCap: 100,
        minShortCirCap: 0,
        eServAgCap: 0,
        dEquipCap: 0,
        voltageUpperLimit: 110,
        voltageLowerLimit: 90,
        voltageLnterThr: 10,
        matchVoltage: 1,
      };
      /**查询并网点列表 */
      listConnectionPoint().then((response) => {
        this.connectionPointOptions = response.rows;
      });
    },
    /**新增通道 */
    handelAdd() {
      this.reset();
      this.title = "新增通道";
      this.open = true;
    },
    /**修改通道 */
    handelEdit(row) {
      this.reset();
      const num = row.num || this.ids[0];

      getByNum(num).then((response) => {
        this.title = "修改通道";
        this.open = true;
        this.formData = response.data;
        console.info("通过num获得数据:");
        console.info(response.data);
      });
    },
    /**删除通道 */
    handelDel(row) {
      const num = row.num || this.ids;
      this.$modal
        .confirm("确认删除吗?")
        .then(function () {
          delChannel(num);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.getList();
          this.open = false;
        })
        .catch(() => {});
    },
    /**搜索按钮 */
    querySearch() {
      this.getList();
      this.queryData.pageNum = 1;
    },
    /**重置搜索 */
    resetSearch() {
      this.resetForm("queryDataRef");
      this.querySearch();
    },
    /**多选监听 */
    handelSelectionChange(val) {
      this.ids = val.map((item) => item.num);
      this.single = this.ids.length != 1;
      this.multiple = !this.ids.length;
    },
    /**提交表单 */
    submitFormData() {
      this.$refs["formDataRef"].validate((valid) => {
        if (valid) {
          if (this.formData.num != undefined) {
            console.info("修改数据");
            console.info(this.formData);
            // 修改
            editChannel(this.formData).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            console.info("新增数据");
            console.info(this.formData);
            // 新增
            addChannel(this.formData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /**取消 */
    close() {
      this.resetForm("formDataRef");
      this.open = false;
    },
    deviceSearch() {
      getDeviceList(this.deviceSearchParams).then((response) => {
        this.deviceOptions = response.rows;
      });
    },
  },
};
</script>

<style lang="scss">
.el-radio-group {
  display: flex;
  flex-direction: column;
  .el-radio {
    width: 100%;
    line-height: 35px;
  }
  .is-checked {
    background-color: #f8f8f9;
    font-weight: 600;
  }
}
</style>
